// "40.5px 0px 18.375px" {top: 40.5, right: 0, bottom: 18.375, left: 0}
var filterTop = function(str) {
  var strList = str.split(' ').map(function(sItem) {
    return sItem.replace('px', '');
  });

  return {
    top: strList[0] - 0,
    right: strList[1] - 0,
    bottom: strList.length > 2 ? strList[2] - 0 : 0,
    left: strList.length > 3 ? strList[3] - 0 : 0,
  }
};

var myScroll;

var iscrollFn = function() {
  myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    click: true,
  });
};

var setHeightFn = function () {
    var $titleBox = Zepto('#enter-title-box');
    var titlePadding = filterTop(Zepto('#enter-title-box').css('padding'));
    var topBlock = $titleBox.height() + titlePadding.top + titlePadding.bottom + Zepto('#banner').height();
    var $wrapper = Zepto('#wrapper');

    $wrapper.css('height', Zepto(window).height() - topBlock + 120);
    myScroll.refresh();
}

var bindClick = function() {
  var $item = Zepto('.enter-list-item');
  var $one = Zepto('.enter-list-item-one');
  var $two = Zepto('.enter-list-item-two');

  $item.on('touchend', function() {
    $two.addClass('hide');
    $one.removeClass('hide');
    Zepto(this).find('.enter-list-item-one').addClass('hide');
    Zepto(this).find('.enter-list-item-two').removeClass('hide');
  });
};

var init = function() {
  var $item = Zepto('.enter-list-item');
  var index = 0;
  var loop = function() {
    if(index === $item.length) {
      clearTimeout(time);
      return;
    }
    const now = index;
    Zepto($item.get(index)).animateCss('fadeInLeft', function() {
      Zepto($item.get(now)).css('opacity', 1);
    });
    index++;

    var time = setTimeout(loop, 50);
  };

  Zepto('#enter-title-box').animateCss('fadeInLeft');
  setTimeout(loop, 200);
};

Zepto(function() {
  init();
  iscrollFn();
  setHeightFn();
  bindClick();

  Zepto(window).on('resize', setHeightFn);
});
